<template>
  <div class="left-nav">
    <div class="nav-content">
    <a class="nav-title" href="">首页</a>
    </div>
    <div class="nav-content">
      <a class="nav-title" href="">功能管理</a>
      <div class="nav-list">
        <a href=""><i class="iconfont iconuser"></i>用户管理</a>
        <a href=""><i class="iconfont iconmessege"></i>消息管理</a>
        <a href=""><i class="iconfont icontask"></i>任务管理</a>
        <a href=""><i class="iconfont iconticket"></i>卡券管理</a>
        <a href=""><i class="iconfont iconbean"></i>学豆管理</a>
        <a href=""><i class="iconfont iconaward"></i>奖励金管理</a>
        <a href=""><i class="iconfont iconactivity"></i>活动管理</a>
      </div>
    </div>
    <div class="nav-content">
        <a class="nav-title" href="">数据分析</a>
        <div class="nav-list">
            <a href=""><i class="iconfont icondata"></i>数据概览</a>
            <a href=""><i class="iconfont iconbean-data"></i>学豆分析</a>
            <a href=""><i class="iconfont iconticket-data"></i>卡券分析</a>
            <a href=""><i class="iconfont iconactivity-data"></i>活动分析</a>
            <a href=""><i class="iconfont icontask-data"></i>任务分析</a>
            <nuxt-link to="/advertiseAnalysis"><i class="iconfont iconad-data"></i>推广渠道分析</nuxt-link>
        </div>
    </div>
    <div class="nav-content">
      <a class="nav-title" href="">推广渠道</a>
      <div class="nav-list">
      <nuxt-link to="/advertise" :class="{on:this.$route.params===''}"><i class="iconfont iconpc"></i>电脑端</nuxt-link>
      <a href=""><i class="iconfont iconphone"></i>移动端</a>
      <a href=""><i class="iconfont iconcustom"></i>公众号</a>
      <a href=""><i class="iconfont iconnote"></i>短信</a>
      </div>
    </div>
    <div class="nav-content">
      <a class="nav-title" href="">系统管理</a>
      <div class="nav-list">
        <a href=""><i class="iconfont iconpen"></i>日志记录</a>
        <a href=""><i class="iconfont iconsecurity"></i>安全信息</a>
      </div>
    </div>
    <div class="nav-content">
      <a class="nav-title" href="">权限设置</a>
      <div class="nav-list">
        <a href=""><i class="iconfont iconmember"></i>人员设置</a>
        <a href=""><i class="iconfont iconmenu"></i>菜单配置</a>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return{

    }
  },
  mounted:function(){
    
  }
}
</script>  
<style lang="scss" scoped>
  .left-nav{
    float:left;
    width:313px;
    padding: 3px 30px 0;
    .nav-title{
      margin:34px 0;
      display: block;
      font-size: 16px;
      color: #0F1B41;
      line-height: 16px;
      font-weight: 700;
    }
    .nav-list{
      a{
        display: block;
        padding-left: 32px;
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        background: transparent;
        color: #A4ADC8;
        &:hover,&.nuxt-link-active{
          background: #5468FF;
          box-shadow: 0 9px 19px 0 rgba(84,104,255,0.20);
          border-radius:4px;
          color: #fff;
          .iconfont{
            color:#fff;
          }
        }
      }
      .iconfont{
        margin-right:18px;
        color:rgba(164,173,200,1);
        font-size: 19px;
      }
    }
  }
</style>
